Code block to dynamically register a component #1900
Conversation
As someone relatively new to JS + Vue, the existing sample code for dynamic imports didn't tell me how to actually register the component dynamically, which is the likely case for importing a module. The proposed code block does both: it dynamically imports the module and also registers the component.
|
Hi @garychou, Thanks for your work. I don't understand why this example would be necessary? The main purpose of this part is to show that dynamic import fix errors for external libs trying to access Your example demonstrate the same logic but with a component dynamic import. I assume this is in case this component import itself a lib that assumes a browser environment. However I still think this is redundant content. |
|
Hi @kefranabg, I think most people are going to run into this problem primarily when they're attempting to use a component that assumes a browser environment. And, in that case, in addition to dynamically importing the module, they'll also need to dynamically register the component. The current example doesn't show you how to do that. I'm relatively new to Vue, not to mention JS, so perhaps this should be assumed knowledge. Thus, I thought the docs would be improved by showing a concise example of how to both dynamically import + register in one step. (That, or a link to another part of the docs that show how to dynamically register a component.) |
|
Actually this section want to emphasize that non-ssr-friendly components should be registered at browsers lifecycle hooks. using async component directly is not a good solution. |
Using dynamic components to register non-ssr-friendly components.
|
I just updated the relevant docs. |
|
Hey @garychou, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚 |
|
Perfect! Thanks @ulivz! |
As someone relatively new to JS + Vue, the existing sample code for dynamic imports didn't tell me how to actually register the component dynamically, which is the likely case for importing a module.
The proposed code block does both: it dynamically imports the module and also registers the component.
Summary
What kind of change does this PR introduce? (check at least one)
If changing the UI of default theme, please provide the before/after screenshot:
Does this PR introduce a breaking change? (check one)
If yes, please describe the impact and migration path for existing applications:
The PR fulfills these requirements:
fix #xxx[,#xxx], where "xxx" is the issue number)You have tested in the following browsers: (Providing a detailed version will be better.)
If adding a new feature, the PR's description includes:
To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.
Other information: